<!-- 单词抽测 -->
<template>
  <audio style="display: none"  ref="radioRef"  controls></audio>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>单词抽测</span>
      </div>
    </template>

    <el-row justify="end">
      <el-select v-model="testCount" class="m-2" :disabled="fetchButton" style="width: 80px">
        <el-option key="5" label="5个" value="5"/>
        <el-option key="10" label="10个" value="10"/>
      </el-select>
      <el-button @click="fetchWords" :disabled="fetchButton" style="margin-left: 5px">抽取单词</el-button>
    </el-row>

    <el-divider/>

    <el-row>
        <el-table
            :data="tableData"
            empty-text="无数据，点击上面抽取单词"
            style="width: 100%"
        >
          <el-table-column label="播放" width="60" >
            <template #default="scope">
              <div @click="playAudio(scope.row.voiceUrl)">
                <el-icon :size="30"><VideoPlay /></el-icon>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="输入单词" width="160" >
            <template #default="scope">
              <el-input v-model.trim="scope.row.input" placeholder="请输入单词" type="text" :disabled="disabledInput" size="large" />
            </template>
          </el-table-column>
          <el-table-column label="正确单词" width="160" >
            <template #default="scope">
              <el-alert v-if="scope.row.show" :title="scope.row.word" :type="scope.row.result" :closable="false" show-icon />
              <el-icon v-if="!scope.row.show"><Hide /></el-icon>
            </template>
          </el-table-column>
        </el-table>
    </el-row>

    <el-row justify="end">
      <el-button @click="confirm()" :disabled="disabledInput" size="large" style="margin-top: 10px" type="primary">确认</el-button>
    </el-row>


  </el-card>
</template>

<script setup>
  import { ref } from 'vue'
  import {randomWord, wordTestSave} from '../apis/review'

  const testCount = ref('5');
  const disabledInput = ref(true);
  const fetchButton = ref(false);
  const tableData = ref([]);
  // const tableData = ref([
  //   {
  //     id: 1,
  //     word: 'test',
  //     voiceUrl: 'http://dictmp3.kekenet.com/mp3/45/b5a3de018630d08e99a83991dffdb2f3.mp3',
  //   },
  //   {
  //     id: 2,
  //     word: 'test2',
  //     voiceUrl: 'http://dictmp3.kekenet.com/mp3/45/b5a3de018630d08e99a83991dffdb2f3.mp3',
  //   }
  // ]);


  let radioRef = ref({});
  function playAudio(radioUrl) {
    let audio = radioRef.value;
    audio.src = radioUrl;

    if (audio.paused) {
      audio.play();
    } else {
      audio.pause();
    }
  }

  function fetchWords() {
    console.log(testCount);
    randomWord({size: testCount.value}).then((res) => {
      // console.log(res);
      tableData.value = res.data;
      fetchButton.value = true;
      disabledInput.value = false;
    });
  }

  function confirm() {
    if(!check()) {
      ElMessage.error('请填写所有单词')
      return;
    }

    for(let i = 0; i < tableData.value.length; i++) {
      tableData.value[i].show = true;
      tableData.value[i].input = tableData.value[i].input.toLowerCase();
      tableData.value[i].result = tableData.value[i].word === tableData.value[i].input ? 'success' : 'error';
    }

    wordTestSave({testResultList: tableData.value}).then((res) => {
      disabledInput.value = true;
      fetchButton.value = false;
    });
  }

  function check() {
    for(let i = 0; i < tableData.value.length; i++) {
      if(!tableData.value[i].input) {
        return false;
      }
    }
    return true;
  }
</script>


<style scoped>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-error-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>